<template>
	<div id='process'>
		<div class="title">
			<h2>加盟流程</h2>
			<h3>加盟大品牌，成功快人一步！</h3>
			<span class="underline"></span>
		</div>
		<ul class='clearfix'>
			<li>

				<div class='img_div'>
					<img src="../../../../static/imgs/login/sl_1.png" />
					<span> </span>
				</div>
				<p>在线咨询</p>
			</li>
			<li>
				<div class='img_div '>
					<img src="../../../../static/imgs/login/sl_2.png" />
					<span></span>
				</div>
				<p>达成意向</p>
			</li>
			<li>
				<div class='img_div'>
					<img src="../../../../static/imgs/login/sl_3.png" />
					<span></span>
				</div>
				<p>签订合同</p>
			</li>
			<li>
				<div class='img_div'>
					<img src="../../../../static/imgs/login/sl_4.png" />
					<span></span>
				</div>
				<p>店面选址</p>
			</li>
			<li class='active'>
				<div class='img_div'>
					<img src="../../../../static/imgs/login/sl_5.png" />
					<span></span>
				</div>
				<p>装修施工</p>
			</li>
			<li >
				<div class='img_div img_active'>
					<img src="../../../../static/imgs/login/sl_10.png" />
					<span></span>
				</div>
				<p>正式开业</p>
			</li>

			<li>
				<div class='img_div img_active'>
					<img src="../../../../static/imgs/login/sl_9.png" />
					<span></span>
				</div>
				<p>运营与管理</p>
			</li>
			<li>
				<div class='img_div img_active'>
					<img src="../../../../static/imgs/login/sl_8.png" />
					<span></span>
				</div>
				<p>推广先行</p>
			</li>
			<li>
				<div class='img_div img_active'>
					<img src="../../../../static/imgs/login/sl_7.png" />
					<span></span>
				</div>
				<p>开业准备</p>
			</li>
			<li class='active'>
				<div class='img_div'>
					<img src="../../../../static/imgs/login/sl_6.png" />

				</div>
				<p>人员培训</p>
			</li>
			<!--@413298765-->
		</ul>
	</div>
</template>

<script>
export default {
  name: "process"
};
</script>

<style scoped lang='scss'>
#process {
  padding: 324px 284px 0px;
  .title {
    h2 {
      font-size: 48px;
      padding-bottom: 17px;
      font-family: SourceHanSansCN-Normal;
      color: #f5855f;
      line-height: 25px;
    }
    h3 {
      font-size: 35px;
      font-family: SourceHanSansCN-Light;
      color: #a0a0a0;
      padding-bottom: 24px;
    }
    .underline {
      display: block;
      width: 68px;
      height: 3px;
      background-color: #f5855f;
    }
  }
  ul {
    padding-top: 140px;
    li {
      float: left;
      width: 172px;
      height: 320px;
      margin-right: 120px;
      &.active {
        margin-right: 0px;
        .img_div {
          span {
            top: 240px;
            left: 70px;
            transform: rotate(90deg);
          }
        }
      }
      .img_div {
        position: relative;
        span {
          width: 23px;
          height: 50px;
          display: block;
          position: absolute;
          top: 60px;
          left: 200px;
          background: url(../../../../static/imgs/login/jt.png);
          background-size: cover;
          background-position: center center;
        }
        &.img_active {
          span {
            transform: rotate(180deg);
          }
        }
      }
      p {
        text-align: center;
        padding-top: 20px;
        font-size: 22px;
        font-family: SourceHanSansCN-Light;
        color: #a0a0a0;
        line-height: 27px;
      }
    }
  }
}
</style>